import QtQuick 2.5
import QtGraphicalEffects 1.0

Item {
    id:root
    signal bntClicked()
    property string imgSourece;
    property string bntText;
    property bool selected:false

    Glow{
        anchors.fill: frontcap
        source:frontcap
        samples: 20
        radius: 20
        fast:true
        transparentBorder: true
        spread: 0.4
        color:"#66000000"
        scale:frontcap.scale
    }

    Rectangle{
        id:frontcap
        anchors.centerIn: parent
        width: parent.width+20
        height: parent.height-10
        color:"#aaef45"
        scale: selected?1:0
        Behavior on scale{
            PropertyAnimation{
                properties: "scale"
                duration: 200
                easing.type: Easing.OutQuint
            }
        }
    }

    Rectangle{
        anchors.centerIn: parent
        color:"#33000000"
        radius: 3
        scale:ma.containsMouse?1:0
        opacity: ma.containsMouse?1:0
        id:cap
        width:parent.width-10
        height:parent.height*5/6
        Behavior on scale{
            PropertyAnimation{
                properties: "scale"
                duration: 200
                easing.type: Easing.OutBack
            }
        }
        Behavior on opacity{
            PropertyAnimation{
                properties: "opacity"
                duration: 100
            }
        }
    }

    Row{
        anchors.centerIn: parent
        spacing: 10
        Image {
            source: imgSourece
            antialiasing: true
        }
        Text{
            text:bntText
            color:selected?"#101010":"#f0f0f0"
            font.bold: selected
            font.underline: selected
//            font.overline: selected?true:false
            font.pixelSize: 20
        }
    }
    MouseArea{
        anchors.fill: parent
        id:ma
        hoverEnabled: true
        onClicked: bntClicked()
    }
}

